<!--
* @author wn
* @date 2023/09/22 15:56:14
* @description: 个人中心 页
!-->
<template>
	<scroll-view
		class="viewport"
		scroll-y
		enable-back-to-top
		@scrolltolower="getMore"
	>
		<!-- 个人资料 -->
		<view
			class="profile"
			:style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }"
		>
			<!-- 情况1：已登录 -->
			<view class="overview" v-if="member">
				<navigator url="/pagesMember/profile/profile" hover-class="none">
					<image class="avatar" mode="aspectFill" :src="member.avatar"></image>
				</navigator>
				<view class="meta">
					<view class="nickname">
						{{ member.nickname || member.account }}
					</view>
					<navigator
						class="extra"
						url="/pagesMember/profile/profile"
						hover-class="none"
					>
						<text class="update">更新头像昵称</text>
					</navigator>
				</view>
			</view>
			<!-- 情况2：未登录 -->
			<view class="overview" v-else>
				<navigator url="/pages/login/login" hover-class="none">
					<image
						class="avatar gray"
						mode="aspectFill"
						src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
					></image>
				</navigator>
				<view class="meta">
					<navigator
						url="/pages/login/login"
						hover-class="none"
						class="nickname ellipsis"
					>
						未登录
					</navigator>
					<view class="extra"> 点击登录账号 </view>
				</view>
			</view>
			<navigator
				class="settings"
				url="/pagesMember/settings/settings"
				hover-class="none"
			>
				设置
			</navigator>
			<!-- 我的订单 绝对定位-->
			<view class="orders">
				<view class="title">
					我的订单
					<navigator
						class="navigator icon-right-after"
						url="/pagesOrder/list/list?type=0"
						hover-class="none"
					>
						查看全部订单
					</navigator>
				</view>
				<view class="section">
					<!-- 订单 -->
					<navigator
						v-for="item in orderTypes"
						:key="item.type"
						:class="item.icon"
						:url="`/pagesOrder/list/list?type=${item.type}`"
						class="navigator"
						hover-class="none"
					>
						{{ item.text }}
					</navigator>
					<!-- 客服 -->
					<button class="contact icon-handset" open-type="contact">售后</button>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<XtxGuess ref="guessRef" />
	</scroll-view>
</template>
<script lang="ts" setup>
import { useGuess } from '@/hook/useGuess'
import { useMemberStore } from '@/stores'
import { storeToRefs } from 'pinia'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 订单选项  查看全部订单--type: 0
const orderTypes = [
	{ type: 1, text: '待付款', icon: 'icon-currency' },
	{ type: 2, text: '待发货', icon: 'icon-gift' },
	{ type: 3, text: '待收货', icon: 'icon-check' },
	{ type: 4, text: '待评价', icon: 'icon-comment' },
]

// 获取会员信息
const memberStore = useMemberStore()
const { member } = storeToRefs(memberStore)

// 猜你喜欢 hook
const { guessRef, getMore } = useGuess()
</script>
<style lang="scss">
.viewport {
	height: 100%;
}
/* 用户信息 */
.profile {
	display: flex;
	justify-content: space-between;
	position: relative;
	height: 420rpx;
	padding: 0 36rpx;
	background: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png)
		no-repeat top / contain;

	.overview {
		display: flex;
		height: 120rpx;
		color: #fff;
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #eee;
		}

		.gray {
			// 将图像转换为灰度图像
			filter: grayscale(100%);
		}

		.meta {
			line-height: 30rpx;
			padding: 16rpx 0;
			margin-left: 20rpx;
			.nickname {
				max-width: 350rpx;
				margin-bottom: 16rpx;
				font-size: 30rpx;
				-webkit-line-clamp: 1; // 一行省略
			}
			.update {
				padding: 3rpx 10rpx 1rpx;
				color: rgba(255, 255, 255, 0.8);
				border: 1rpx solid rgba(255, 255, 255, 0.8);
				border-radius: 30rpx;
			}
			.extra {
				font-size: 22rpx;
			}
		}
	}
	.settings {
		padding-top: 60rpx;
		font-size: 30rpx;
		color: #fff;
	}
}

/* 我的订单 */
.orders {
	position: absolute;
	left: 20rpx;
	right: 20rpx;
	bottom: 0;
	transform: translateY(32%);
	width: 710rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

	.title {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #1e1e1e;

		.navigator {
			font-size: 24rpx;
			color: #939393;
			float: right;
		}
	}

	.section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0rpx 10rpx;
		.navigator,
		.contact {
			text-align: center;
			font-size: 24rpx;
			color: #333;
			&::before {
				display: block;
				font-size: 60rpx;
				color: #ff9545;
			}
		}
		.contact {
			padding: 0;
			margin: 0;
			border: 0;
			background-color: transparent;
			line-height: inherit;
		}
	}
}

/* 猜你喜欢 */
.caption {
	margin-top: 80rpx;
}
</style>
